<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<style>
    /* 动画 */
    @keyframes comein{
        from{
            transform: translateX(-100px);
        }
        to{
            transform: translateX(0px);
        }
    }
    @keyframes comeout{
        from{
            transform: translateX(0px);
        }
        to{
            transform: translateX(-100px);
        }
    }
    /* 过渡 */
    .v-enter-from, .v-leave-to{
        opacity: 0;
    }
    .v-enter-to, .v-leave-from{
        opacity: 1;
    }
    /* 进入的动画 */
    .v-enter-active{
        /* 动画 */
        animation: comein 3s;
        /* 过渡 */
        transition: opacity 7s ease-out;
    }
    /* 离开的动画 */
    .v-leave-active{
        /* 动画 */
        animation: comeout 3s;
        /* 过渡 */
        transition: opacity 7s ease-out;
    }
</style>
<script>
    const app = Vue.createApp({
        data(){
            return{
                isshow: true
            }
        },
        methods:{
            guodu(){
                this.isshow = !this.isshow
            }
        },
        template:`
        <transition 
        type="animation"
        >
            <div v-show="isshow" class="div01">出现和隐藏</div>
        </transition>
        <button @click="guodu()">按钮</button>`
    })
    app.mount("#app")
    // type="animation" 当动画时间少于过渡时间时,使用，以动画时长为准
    // type="transition" 当动画时间多于过渡时间时,使用，以过渡时长为准
    // :duration="1000" 控制过渡或动画时长 :duration="{enter:1000,leave:3000}"
</script>
</html>